{extend name="public/base"}

{block name="title"}就行天下-商品详情{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/home/css/index.css" />
<style>
    .msui_menu-li{
        width: 33%;
    }
</style>
{/block}

{block name="main"}
<div class="pageControl commodityDetail bg-f7">
    <div class="commodityDetail_dian"> </div>
    <div class="main-top"></div>
    <div class="zhe3"> </div>
    <div class="msui_nav msui_navTop noBorder">
        <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">就行天下</h1>
    </div>
    <div class="msui_menu msui_menu_fixed">
        <div class="msui_menu-mask">
            <ul class="msui_menu-bd1 js-menu msui_menu-bd-count">
                <li class="msui_menu-li" data-tab="0"><a class="msui_menu-list msui_tabMenu-active fs08 cl-6666" data-status="0">商品</a></li>
                <li class="msui_menu-li" data-tab="1"><a class="msui_menu-list fs08 cl-6666" data-status="1">详情</a></li>
                <li class="msui_menu-li" data-tab="2"><a class="msui_menu-list fs08 cl-6666" data-status="2">口碑</a></li>
                <!-- 用于动画的层 -->
                <div id="line" class="weui-baseline"></div>
            </ul>
        </div>
    </div>
    <div class="mtab_list commodityDetail-ul">
        <div class="js-list active" dataOrder="0">
            <div class="commodityDetail-list-top">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        {volist name="data.images" id="vo"}
                        <div class="swiper-slide">
                            <a href="javascript:;"><img src="{$vo.image}" alt=""/></a>
                        </div>
                        {/volist}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <a href="javascript:;" class="commodityDetail-link">{$data.brand_name}</a>
            </div>
            <div class="weui-cell cl-3333 bg-fff">
                <div class="weui-cell__bd">
                    <p class="listFont">{$data.name}</p>
                </div>
            </div>
            <div class="weui-cell commodityDetail-price noBorder">
                <div class="weui-cell__bd">
                    <span class="fs075 cl-c40">￥{$data.price}</span>
                    <s class="fs06">￥{$data.counter_price}</s>
                </div>
            </div>
            <a href="javascript:;" data-target="#promotion" class="open-popup weui-cell weui-cell_access noBorder">
                <div class="weui-cell__hd mr05">
                    <span class="fs06">促销</span>
                </div>
                <div class="weui-cell__bd">
                    <p class="fs06"><span class="cl-c40">多件多折</span>促销标题</p>
                    <p class="fs06"><span class="cl-c40">多件多折</span>促销标题</p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <a href="javascript:;" data-target="#coupon" class="open-popup weui-cell weui-cell_access bg-fff8ee">
                <div class="weui-cell__hd img_11 mr05">
                    <img src="__STATIC__/home/images/sp1.png" alt="">
                </div>
                <div class="weui-cell__bd">
                    <p class="cl-9999 fs065">
                        领取就行天下优惠券: <span class="cl-3333">80元、30元、10元</span>
                    </p>
                </div>
                <div class="weui-cell__ft"></div>
            </a>
            <div class="weui-cell bg-fff8ee">
                <div class="weui-cell__hd  mr06">
                    <span class="fs06 cl-9999">说明</span>
                </div>
                <div class="weui-cell__bd">
                    <p class="cl-3333 fs065">
                        保证正品 极品送货 七天无条件退货
                    </p>
                </div>
                <div class="weui-cell__ft"></div>
            </div>
            <a href="javascript:;" class="weui-cell mr-bottom30 weui-cell_access open-popup" data-target="#parameter">
                <div class="weui-cell__bd">
                    <p class="fs065 cl-9999">产品参数</p>
                </div>
                <div class="weui-cell__ft">

                </div>
            </a>
            <div class="commodityDetail-bottom bg-fff">
                <a href="{:url('rong/create_chat', ['id' => $data['id'], 'type' => 'friend', 'targetId' => $data['member_id'], 'role' => 'shop'])}">
                    <i class="icon iconfont icon-kefu"></i>
                    <p class="fs06 cl-9999 title">客服</p>
                </a>
                <a href="javascript:;" class="cl-f add-cart now_buy">立即购买</a>
                <a href="javascript:;" class="add-cart">
                    <i class="icon iconfont icon-cart"></i>
                    <p class="fs06 cl-9999 title">加入购物车</p>
                </a>
            </div>
        </div>
        <div class="js-list " dataOrder="1">
            {$data.content}
        </div>
        <div class="js-list comment-list" dataOrder="2">

        </div>
    </div>
</div>
<!--优惠券-->
<div id="coupon"  class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <h1 class="title cl-3333 fs075">优惠券</h1>
                <a href="javascript:;" class="cl-666 picker-button close close-popup close">
                    <i class="icon iconfont icon-guanbi1"></i>
                </a>
            </div>
        </div>
        <div class="modal-content fs06">
            <div class="weui-cell ftAbsolute_bt">
                <div class="weui-cell__bd">
                    <p class="fs06 cl-c40">10元</p>
                    <p class="mtop05 cl-9999">订单满120元使用(不含邮费)</p>
                    <p class="cl-9999">使用期限 <span>2017.05.20-2017.20.20</span></p>
                </div>
                <div class="weui-cell__ft ftAbsolute_bt">
                    <a href="" class="small_btn">领取</a>
                </div>
            </div>
            <div class="weui-cell ftAbsolute_bt">
                <div class="weui-cell__bd">
                    <p class="fs06 cl-c40">10元</p>
                    <p class="mtop05 cl-9999">订单满120元使用(不含邮费)</p>
                    <p class="cl-9999">使用期限 <span>2017.05.20-2017.20.20</span></p>
                </div>
                <div class="weui-cell__ft ftAbsolute_bt">
                    <a href="" class="small_btn">领取</a>
                </div>
            </div>
            <div class="weui-cell ftAbsolute_bt">
                <div class="weui-cell__bd">
                    <p class="fs06 cl-c40">10元</p>
                    <p class="mtop05 cl-9999">订单满120元使用(不含邮费)</p>
                    <p class="cl-9999">使用期限 <span>2017.05.20-2017.20.20</span></p>
                </div>
                <div class="weui-cell__ft">
                    <a href="" class="small_btn">领取</a>
                </div>
            </div>
        </div>

    </div>
</div>
<!--促销-->
<div id="promotion"  class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <h1 class="title cl-3333 fs075">促销</h1>
                <a href="javascript:;" class="cl-666 picker-button close close-popup close">
                    <i class="icon iconfont icon-guanbi1"></i>
                </a>
            </div>
        </div>
        <div class="modal-content fs06 promotion bg-fff">
            <div class="weui-cell promotion-list">
                <div class="weui-cell__hd">
                    <span class="fs06 cl-c40">满赠</span>
                </div>
                <div class="weui-cell__bd ">
                    <p class="fs06">五粮液1999送125ml小酒</p>
                    <p class="fs06 cl-9999">五粮液1999送125ml小酒,赠品有限,赠完为止</p>
                    <p class="fs06 cl-9999">多单满赠不叠加</p>
                </div>
            </div>
            <div class="weui-cell promotion-list">
                <div class="weui-cell__hd">
                    <span class="fs06 cl-c40">满赠</span>
                </div>
                <div class="weui-cell__bd ">
                    <p class="fs06">五粮液1999送125ml小酒</p>
                    <p class="fs06 cl-9999">五粮液1999送125ml小酒,赠品有限,赠完为止</p>
                    <p class="fs06 cl-9999">多单满赠不叠加</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--产品参数-->
<div id="parameter"  class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <h1 class="title cl-3333 fs075">产品参数</h1>
                <a href="javascript:;" class="cl-666 picker-button close close-popup close">
                    <i class="icon iconfont icon-guanbi1"></i>
                </a>
            </div>
        </div>
        <div class="modal-content fs06">
            <div class="weui-cell">
                <div class="weui-label">
                    <span class="cl-9999">生产日期</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{$data.date_in_produced}</span>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-label">
                    <span class="cl-9999">体积(ml)</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{$data.ml}</span>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-label">
                    <span class="cl-9999">品牌</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{$data.brand_name}</span>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-label">
                    <span class="cl-9999">产地</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{$data.place_of_origin}</span>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
            <div class="weui-cell ">
                <div class="weui-label">
                    <span class="cl-9999">香型</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{$data.scent}</span>
                </div>
                <div class="weui-cell__ft">

                </div>
            </div>
        </div>

    </div>
</div>
{/block}

{block name="javascript"}
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/home/jquery_weui/js/11.js"></script>
<script>
    $(function() {
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 1,
            loop:true,
            paginationClickable: true,
            spaceBetween: 5,
            autoplay:3000
        });

        // ** 加载评论数据
        var obj = {
            'is_more' : true,
            'page' : 1,
            'url' : '{:url("get_comment")}',
            'tab' : 0
        };
        $('.msui_menu-li').click(function () {
            obj.tab = $(this).data('tab');
            if (obj.page == 1 && obj.tab == 2) {
                get_comment_list();
            }
        });
        $(window).scroll( function() {
            if (($(document).height() - $(this).scrollTop() - $(this).height()<50) && obj.is_more && obj.tab == 2){
                get_comment_list();
            }
        });

        function get_comment_list() {
            $.showLoading();
            obj.is_more = false;
            $.ajax({
                type : 'GET',
                url : obj.url + '?page=' + obj.page + '&id={$id}&shop_id={$shop_id}',
                dataType : 'json',
                success : function (msg) {
                    $.hideLoading();
                    if (obj.page == 1) {
                        $(".comment-list").html(msg.tpl);
                    } else {
                        $(".comment-list").append(msg.tpl);
                    }
                    // 计算是否还有更多数据
                    if (msg.data.is_more > 0) {
                        obj.is_more = true;
                    }
                    obj.page++;
                }
            });
        }

        // ** 加入购物车
        $(".add-cart").click(function () {
            var _this = $(this);
            $.showLoading('正在提交');
            $.post("{:url('cart/add_cart', ['id' => $data['id'], 'shop_id' => $shop_id])}" , function (msg) {
                $.hideLoading();
                if (msg.code == 200) {
                    if (_this.hasClass('now_buy')) {
                        window.location.href = '{:url("order/affirm_order")}?cart_id[]=' + msg.data.cart_id;
                    } else {
                        $.toptip('添加成功！', 'success');
                        var cart = $('.msui_navTop-cnav');
                        var dian = $('.commodityDetail_dian');
                        var count=parseFloat($('.msg_count').html());
                        var shoppingCart_count = parseFloat($(".shoppingCart_count").text());
                        var imgtodrag = $('.swiper-slide.swiper-slide-active').find("img").eq(0);
                        if (imgtodrag) {
                            var imgclone = imgtodrag.clone()
                                .offset({
                                    top: dian.offset().top-75,
                                    left: dian.offset().left-75
                                })
                                .css({
                                    'opacity': '0.5',
                                    'position': 'absolute',
                                    'height': '150px',
                                    'width': '150px',
                                    'z-index': '20000'
                                })
                                .appendTo($('body'))
                                .animate({
                                    'top': cart.offset().top + 10,
                                    'left': cart.offset().left + 30,
                                    'width': '.3rem',
                                    'height': '.3rem'
                                }, 1000, 'easeInOutExpo',function () {
                                    $('.msg_count').html(count+1).show();
                                    $(".shoppingCart_count").text(shoppingCart_count+1).show();
                                });
                            imgclone.animate({
                                'width': 0,
                                'height': 0
                            }, function () {
                                $(this).detach()
                            });
                        }
                    }
                } else {
                    $.toptip(msg.msg, 'error');
                }
            }, 'json');
        });
    });
</script>
{/block}